<template>
	<view class="container">
		<!-- 空白页 -->
		<view v-if="!hasLogin || empty === true" class="empty">
			<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
			<view v-if="hasLogin" class="empty-tips">
				空空如也
				<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛></navigator>
			</view>
			<view v-else class="empty-tips">
				空空如也
				<view class="navigator" @click="navToLogin">去登陆></view>
			</view>
		</view>

		<view v-else>
			<!-- 列表 -->
			<view class="cart-list">
				<block v-for="(item, index) in cartList" :key="item.id">
					<view class="cart-item" :class="{ 'b-b': index !== cartList.length - 1 }">
						<view class="image-wrapper">
							<image
								:src="item.image"
								:class="[item.loaded]"
								mode="aspectFill"
								lazy-load
								@load="onImageLoad('cartList', index)"
								@error="onImageError('cartList', index)"
							></image>
							<view class="yticon icon-xuanzhong2 checkbox" :class="{ checked: item.checked }" @click="check('item', index)"></view>
						</view>
						<view class="item-right">
							<text class="clamp title">{{ item.title }}</text>
							<text class="attr">{{ item.attr_val }}</text>
							<text class="price">¥{{ item.price }}</text>
							<uni-number-box
								class="step"
								:min="1"
								:max="item.stock"
								:value="item.number > item.stock ? item.stock : item.number"
								:isMax="item.number >= item.stock ? true : false"
								:isMin="item.number === 1"
								:index="index"
								@eventChange="numberChange"
							></uni-number-box>
						</view>
						<text class="del-btn yticon icon-fork" @click="deleteCartItem(index)"></text>
					</view>
				</block>
			</view>
			<!-- 底部菜单栏 -->
			<view class="action-section">
				<view class="checkbox">
					<image :src="allChecked ? '/static/selected.png' : '/static/select.png'" mode="aspectFit" @click="check('all')"></image>
					<view class="clear-btn" :class="{ show: allChecked }" @click="clearCart">清空</view>
				</view>
				<view class="total-box">
					<text class="price">¥{{ total }}</text>
					<text class="coupon">
						已优惠
						<text>74.35</text>
						元
					</text>
				</view>
				<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			total: 0, //总价格
			allChecked: false, //全选状态  true|false
			empty: false, //空白页现实  true|false
			cartList: []
		};
	},
	computed: {
		...mapState(['hasLogin'])
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		navToLogin() {
			uni.navigateTo({
				url: '/pages/public/login'
			});
		},
		//请求数据
		async loadData() {
			let list = await this.$api.json('cartList');
			let cartList = list.map(item => {
				item.checked = true;
				return item;
			});
			this.cartList = cartList;
			this.calcTotal(); //计算总价
		},
		//监听image加载完成
		onImageLoad(key, index) {
			this.$set(this[key][index], 'loaded', 'loaded');
		},
		//监听image加载失败
		onImageError(key, index) {
			this[key][index].image = '/static/errorImage.jpg';
		},
		//选中状态处理
		check(type, index) {
			if (type === 'item') {
				this.cartList[index].checked = !this.cartList[index].checked;
			} else {
				const checked = !this.allChecked;
				const list = this.cartList;
				list.forEach(item => {
					item.checked = checked;
				});
				this.allChecked = checked;
			}
			this.calcTotal(type);
		},
		//数量
		numberChange(data) {
			this.cartList[data.index].number = data.number;
			this.calcTotal();
		},
		//删除
		deleteCartItem(index) {
			let list = this.cartList;
			let row = list[index];
			let id = row.id;
			this.cartList.splice(index, 1);
			this.calcTotal();
			uni.hideLoading();
		},
		//清空
		clearCart() {
			uni.showModal({
				content: '清空购物车？',
				success: e => {
					if (e.confirm) {
						this.cartList = [];
					}
				}
			});
		},
		//计算总价
		calcTotal() {
			let list = this.cartList;
			if (list.length === 0) {
				this.empty = true;
				return;
			}
			let total = 0;
			let checked = true;
			list.forEach(item => {
				if (item.checked === true) {
					total += item.price * item.number;
				} else if (checked === true) {
					checked = false;
				}
			});
			this.allChecked = checked;
			this.total = Number(total.toFixed(2));
		},
		//创建订单
		createOrder() {
			let list = this.cartList;
			let goodsData = [];
			list.forEach(item => {
				if (item.checked) {
					goodsData.push({
						attr_val: item.attr_val,
						number: item.number
					});
				}
			});
			
			uni.navigateTo({
				url: `/pages/order/createOrder?data=${JSON.stringify({
					goodsData: goodsData
				})}`
			});
			this.$msg.msg('跳转下一页 sendData');
		}
	}
};
</script>

<style lang="scss">
@import './cart.scss';
</style>
